<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>popup</title>
	<style>
.switch {
    position: relative;
    width: 125px;
    height: 55px;
    border-radius: 3px;
    margin: 2px;
    -webkit-transition: .25s ease;
    transition: .25s ease;
}
.switch:not(.disabled) .slider {
    cursor: pointer;
}
.switch[enabled="-1"] .slider {
    cursor: auto;
}
.switch .slider {
    position: absolute;
    width: 52px;
    height: 45px;
    top: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #F5F7FA;
    border-radius: 2px;
    -webkit-transition: .25s ease;
    transition: .25s ease;
}
.switch .slider:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 3px;
    height: 14px;
    background-color: #E6E9ED;
    box-shadow: 6px 0 0 0 #E6E9ED, -6px 0 0 0 #E6E9ED;
}
.switch .icon {
    position: absolute;
    top: 50%;
}
.switch .icon:before,
.switch .icon:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: .25s ease;
    transition: .25s ease;
}
.switch .icon.tick {
    left: 30px;
}
.switch .icon.tick:before {
    width: 22px;
    height: 6px;
    -webkit-transform: translate(-25%, -50%) rotate(-45deg);
    transform: translate(-25%, -50%) rotate(-45deg);
}
.switch .icon.tick:after {
    width: 6px;
    height: 14px;
    -webkit-transform: translate(-100%, -30%) rotate(-45deg);
    transform: translate(-100%, -30%) rotate(-45deg);
}
.switch .icon.cross {
    right: 32px;
}
.switch .icon.cross:before {
    width: 24px;
    height: 6px;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}
.switch .icon.cross:after {
    width: 24px;
    height: 6px;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}
.switch.null {
    background-color: #FFCE54;
}
.switch.null .slider {
    left: calc(50% + 0px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.switch.null .icon:before,
.switch.null .icon:after {
    background-color: #FFCE54;
}
.switch.unchecked {
    background-color: #D8334A;
}
.switch.unchecked .slider {
    left: calc(0% + 5px);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}
.switch.unchecked .icon:before,
.switch.unchecked .icon:after {
    background-color: #BF263C;
}
.switch.checked {
    background-color: #2ECC71;
}
.switch.checked .slider {
    left: calc(100% - 5px);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
.switch.checked .icon:before,
.switch.checked .icon:after {
    background-color: #2ABA66;
}
.switch.disabled {
    background-color: #CCD1D9;
}
.switch.disabled .icon:before,
.switch.disabled .icon:after {
    background-color: #CCD1D9;
}
.switch.disabled.checked .icon:before,
.switch.disabled.checked .icon:after,
.switch.disabled.unchecked .icon:before,
.switch.disabled.unchecked .icon:after {
    background-color: #AAB2BD;
}
/**/

body {
    font-family: "Merriweather";
}
body .panel {
    border-radius: 5px;
    border: 1px solid #E6E9ED;
    padding: 20px;
}
body .panel h1,
body .panel h2,
body .panel h3,
body .panel h4,
body .panel h5,
body .panel h6,
body .panel .button {
    margin: 0;
    font-family: "Lato";
}
body .panel p {
    margin: 4px 0;
}
body .panel code {
    overflow: hidden;
    border-radius: 4px;
}
body .panel code,
body .panel code p {
    box-shadow: 0 0 0 4px #E6E9ED;
    background-color: #E6E9ED;
    font-family: "Source Code Pro";
    font-size: .9em;
}
body .panel code[i="1"],
body .panel code p[i="1"] {
    padding-left: 10px;
}
body .panel code[i="2"],
body .panel code p[i="2"] {
    padding-left: 20px;
}
body .panel code[i="3"],
body .panel code p[i="3"] {
    padding-left: 30px;
}
body .panel code[i="4"],
body .panel code p[i="4"] {
    padding-left: 40px;
}
body .panel table {
    width: 100%;
    border-spacing: 0;
}
body .panel table tr th {
    border-bottom: 2px solid #E6E9ED;
}
body .panel table tr > * {
    width: 50%;
}
body .panel table .split td {
    border-top: 1px solid #E6E9ED;
}
body .panel > .panel > * {
    margin: 10px 0;
}
body .panel > .panel > *:first-child {
    margin-top: 0px;
}
body .panel > .panel > *:last-child {
    margin-bottom: 0px;
}
body .panel > .panel {
    margin: 10px 0;
}
body .panel > .panel:first-child {
    margin-top: 0px;
}
body .panel > .panel:last-child {
    margin-bottom: 0px;
}
body .panel .button {
    padding: 10px;
    background-color: #2ECC71;
    display: inline-block;
    color: #F5F7FA;
    border-radius: 3px;
    cursor: pointer;
    line-height: 18px;
    background: url("ae.jpeg");
    background-repeat: no-repeat;
}
body .panel .button > span {
    min-width: 30px;
    min-height: 19px;
    background-color: #F5F7FA;
    display: inline-block;
    color: #2ECC71;
    border-radius: 2px;
    text-align: center;
    padding: 0 3px;
}
#ddgjcd{
    position:absolute;
    left: 30%;
    display: none;
}
	
	</style>
</head>
<body style="width:500px;min-height:100px;">
	
   
     
    <div id="ddgj" class="switch unchecked" value="0" enabled="0" form-name="checkbox2">
		<div class="icon tick"></div>
		<div class="icon cross"></div>
		<div class="slider checked"></div>
		
	</div>
    道德攻击

	<script type="text/javascript" style="font-size: 2em;position: absolute;" src="popup.js"></script>
</body>
</html>